<template>
  <div class="app-container">
    <div class="canvas-box">
      <canvas ref="canvas" id="canvas" class="canvas"></canvas>
    </div>
    <div class="timeline-box">
      <el-slider v-model="timeValue" :max="maxTimeValue" :min="minTimeValue" @change="changeTimeValue"></el-slider>
    </div>
    <div class="controls">
      <el-button :disabled="isAnimating" @click="startAnimation">播放</el-button>
      <el-button :disabled="!isAnimating" @click="pauseAnimation">暂停</el-button>
      <el-select v-model="playbackSpeed" size="medium" @change="onPlaybackSpeedChange" style="margin-left: 20px">
        <el-option v-for="speed in playbackSpeedOptions" :key="speed.value" :label="speed.label" :value="speed.value"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
    import { drawTrack, drawTrackSleeper} from './rail'
    export default {
        name: 'CanvasTrack',
        data() {
            return {
                canvas: null,
                canvasContext: null,
                minTimeValue: 0,
                maxTimeValue: 10000,
                preTimeValue: 0,
                timeValue: 0,
                isAnimating: false,
                animationId: null,
                playbackSpeed: 1, // 默认播放速度为1倍速
                playbackSpeedOptions: [ // 倍速选项数组
                    {label: '0.25x', value: 0.25},
                    {label: '0.5x', value: 0.5},
                    {label: '1x', value: 1},
                    {label: '1.5x', value: 1.5},
                    {label: '2x', value: 2}
                ]
            }
        },
        methods: {
            initCanvas() {
                this.animationId = null
                this.canvas = new fabric.Canvas('canvas', {
                    width: 2120,
                    height: 660,
                    selection: false
                })
            },
            clearAll() {
                this.canvas.clear().renderAll()
            },
            changeTimeValue(){
                var step = this.timeValue - this.preTimeValue
                this.canvas.getObjects().forEach(item => {
                    if (item.class === 'sleeperText') {
                        let newLeft = item.get('left') - step
                        let newTop = item.get('top')
                        item.set({left: newLeft, top: newTop}).setCoords()
                    } else {
                        let newX1 = item.get('x1') - step
                        let newX2 = item.get('x2') - step
                        item.set({x1: newX1, x2: newX2}).setCoords()
                    }
                })
                this.preTimeValue = this.timeValue
                this.canvas.renderAll()
            },
            draw() {
                this.clearAll()
                for (let i = 0; i <= 20300; i += 120) {
                    drawTrackSleeper(this.canvas, i+50, 110, i+50, 400, 30, '#303030', this.timeValue,12)
                }
                drawTrack(this.canvas, 0, 150, 22400, 150, 15)
                drawTrack(this.canvas, 0, 350, 22400, 350, 15)
            },
            startAnimation() {
                if (!this.isAnimating) {
                    this.isAnimating = true
                    this.animateFrame()
                }
            },
            // 暂停
            pauseAnimation() {
                if (this.isAnimating) {
                    clearInterval(this.animationId)
                    this.isAnimating = false
                }
            },
            // 倍速
            onPlaybackSpeedChange(speed) {
                this.playbackSpeed = speed
                // 如果正在播放，调整动画速度后可能需要重新计算或调整动画状态
                if (this.isAnimating) {
                    this.pauseAnimation() // 先暂停
                    setTimeout(() => {
                        this.startAnimation() // 再按照新的速度开始
                    }, 0)
                }
            },
            animateFrame() {
                this.timeValue += this.playbackSpeed // 使用当前倍速更新时间值
                let step = this.timeValue - this.preTimeValue
                if (this.timeValue >= this.maxTimeValue) { // 假设100为最大值
                    this.timeValue = 0 // 重置timeValue，形成循环动画
                }
                this.canvas.getObjects().forEach(item => {
                    if (item.class === 'sleeperText') {
                        let newLeft = item.get('left') - step
                        let newTop = item.get('top')
                        item.set({left: newLeft, top: newTop}).setCoords()
                    } else {
                        let newX1 = item.get('x1') - step
                        let newX2 = item.get('x2') - step
                        item.set({x1: newX1, x2: newX2}).setCoords()
                    }
                })
                this.canvas.renderAll()
                this.preTimeValue = this.timeValue
                this.animationId = setTimeout(() => {
                    this.animateFrame()
                }, 1000 / Math.max(1, 60 / this.playbackSpeed)) // 确保至少每秒一帧，且不超过60fps
            }
        },
        created() {
        },
        mounted() {
            this.initCanvas()
            this.draw()
        },
        destroyed() {
        }
    }
</script>

<style scoped>
  .canvas-box{
    width: calc(100% - 40px);
    height: 75%;
    border: #999999 1px solid;
    border-radius: 8px;
  }
  .canvas{
    width: 100%;
    height: 100%;
  }
  .timeline-box {
    padding: 20px 0;
    width: calc(100% - 40px);
  }
  /* ...原有样式... */
  .controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
</style>
